@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

$red:#ec6565;

.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    // overflow: hidden;
}

.profile{
    position: relative;
    float: left;
    width: 194px;
    height: 194px;
    margin: 4px 0 0 4px;
    cursor: pointer;

    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: 0;
        transition: all .6s ease-in-out;
        
    }

    .plus{
        position: absolute;
        width: 50px;
        height: 50px;
        inset: 0;
        margin: auto;
        background: $red;
        border-radius: 50%;
        box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
        transition: all .4s ease-in-out;
        opacity: 0;
        transform: scale(2);
        pointer-events: none;

        &::before{
            position: absolute;
            content: '';
            width: 14px;
            height: 2px;
            background: #fff;
            inset: 0;
            margin: auto;
        }
        &::after{
            position: absolute;
            content: '';
            width: 2px;
            height: 14px;
            background: #fff;
            inset: 0;
            margin: auto;
        }
    }

    &:hover{
        .overlay{
            opacity: 0.4;
        }

        .plus{
            opacity: 1;
            transform: scale(1) translate3d(0,0,0);
        }
    }
}

.detail{
    display: none;
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    font-size: 0;

    &.active{
        pointer-events: all;

        .header{
            transform: translate3d(0,0,0);
            transition: all .6s ease-in-out;
        }

        .image{
            transform: translate3d(0,0,0);
            transition: all .6s ease-in-out .3s;
        }
        .info{
            transform: translate3d(0,0,0);
            transition: all .6s ease-in-out;
        }
        .close{
            transform: rotate(45deg) translate3d(0,0,0);
            transition: background .3s ease-in-out, transform .6s ease-in-out .6s;
        }
    }

    .close{
        position: absolute;
        z-index: 2;
        height: 50px;
        width: 50px;
        background-color: $red;
        top: 10px;
        right: 10px;
        border-radius: 50%;
        cursor: pointer;
        transform: rotate(45deg) translate3d(-105%, -105%, 0);
        transition: background .3s ease-in-out, transform .5s ease-in-out;

        &::before{
            position: absolute;
            inset: 0;
            margin: auto;
            content: '';
            width: 14px;
            height: 2px;
            background-color: #fff;
            transition: all .3s ease-in-out;
        }

        &::after{
            position: absolute;
            content: '';
            height: 14px;
            width: 2px;
            background-color: #fff;
            inset: 0;
            margin: auto;
            transition: all .3s ease-in-out;
        }

        &:hover{
            background-color: #fff;
            &::after, &::before{
                background-color: $red;
            }
        }
    }

    .header{
        transform: translate3d(0, -105%, 0);
        transition: all .6s ease-in .4s;

    }

    .image{
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
        top: 130px;
        left: 150px;
        height: 100px;
        width: 100px;
        border: 2px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 4px 6px 15px 0 rgba(0,0,0,0.2);
        transform: translate3d(0, -250px, 0);
        transition: all .6s ease-in .2s;
        img{
            width: 100%;
            height: auto;
        }
    }

    .info{
        box-sizing: border-box;
        background: $red;
        height: 220px;
        padding-top: 67px;
        transform: translate3d(0, 105%, 0);
        transition: all .6s ease-in .4s;

        .name{
            font-size: 16px;
            font-weight: 600;
            text-align: center;
        }

        .action{
            margin-top: 35px;
            text-align: center;

            .btn{
                position: relative;
                box-sizing: border-box;
                display: inline-block;
                width: 45px;
                height: 45px;
                border: 1px solid #fff;
                margin: 0 20px;
                border-radius: 50%;
                cursor: pointer;
                transition: all .2s ease-in-out;

                &:hover{
                    background: #fff;
                    color: $red;
                    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
                }
            }

            .fa {
                position: absolute;
                font-size: 19px;
                top: 0;
                left: 0;
                right: 0;
                text-align: center;
                line-height: 20px;
                padding-top: 12px;
            }

            .fa-phone{
                font-size: 22px;
            }

            .fa-comment{
                font-size: 20px;
                padding-top: 10px;
                left: 2px;
            }

            .fa-heart{
                top: 1px;
                left: 2px;
            }
        }
    }
}


#detail-1{display: block;}